<template>

    <el-button type="primary" plain @click="dialogFormVisible = true">新增班级</el-button>

    <div class="overflow-x-auto rounded-lg border border-gray-200 shadow-md m-5" v-loading="classLoading"
        element-loading-background="rgba(256, 256, 256, 1)" element-loading-text="正在拼命加载中...">
        <el-dialog v-model="dialogFormVisible" title="新增班级" width="500">
            <el-form :model="form">
                <el-form-item label="班级名称" :label-width="formLabelWidth">
                    <el-input v-model="form.className" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="addClass">
                        新增
                    </el-button>
                </div>
            </template>
        </el-dialog>


        <el-dialog v-model="editClassVisible" title="修改班级" width="500">
            <el-form :model="form">
                <el-form-item label="班级名称" :label-width="formLabelWidth">
                    <el-input v-model="form.className" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="updateClass">
                        更新
                    </el-button>
                </div>
            </template>
        </el-dialog>
        
        <el-dialog v-model="studentListVisible" title="学生列表" width="80%">
            <StudentList>

            </StudentList>
        </el-dialog>
        <table class="w-full border-collapse bg-white text-left text-sm text-gray-500">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">#</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">班级名称</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">创建时间</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">人数</th>
                    <th scope="col" class="px-6 py-10 font-medium text-gray-900">操作</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-gray-100 border-t border-gray-100">
                <tr class="hover:bg-gray-50" v-for="(classModel, index) in classs">

                    <td class="px-4 py-4">{{ classModel.classId }}</td>
                    <td class="px-4  py-4">{{ classModel.className }}</td>
                    <td class="px-4  py-4">{{ classModel.createTime }}</td>
                    <td class="px-4  py-4">{{ classModel.studentNum }}</td>
                    <td class="px-6 py-4">
                        <el-button type="success" @click="studentListVisible = true">查看学生</el-button>
                        <el-button type="primary" @click="openClass(classModel)">修改</el-button>
                        <el-button type="danger" @click="deleteClass(classModel)">删除</el-button>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
    <!-- 分页 -->
    <el-pagination class="pagination" background layout="prev, pager, next" :total="pageQuery.page.size"
        :page-size="pageQuery.page.size" @current-change="changePage" />
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { ClassModel } from '@/lib/types'
import API from '@/plugins/axiosInstance'
import { ElMessage } from 'element-plus';
import { userStore } from '@/store';
import { resolve } from 'path';
import StudentList from './StudentList.vue';
const classLoading = ref(true)
let classs = ref<ClassModel[]>([

])
const currentUser = userStore().user
const dialogFormVisible = ref(false)
const editClassVisible = ref(false)
const studentListVisible = ref(false)
const formLabelWidth = '140px'

let form = reactive<ClassModel>({
    classId: 'auto',
    className: '',
    createBy: currentUser.id,
    createTime:'',
    studentNum:0
})


const addClass = () => {
    API({
        url: '/class/add',
        method: 'post',
        data: form
    }).then((res) => {
        dialogFormVisible.value = false
        getClassList()
    })
}

const openClass = (classModel:ClassModel) => {
    editClassVisible.value = true
    form.classId = classModel.classId
    form.className = classModel.className
}

const updateClass = () => {
    API({
        url: '/class/update',
        method: 'post',
        data: form
    }).then((res) => {
        editClassVisible.value = false
        getClassList()
    })
}

const deleteClass = (classModel:ClassModel) => {
    API({
        url: '/class/remove',
        method: 'post',
        data: classModel
    }).then((res) => {
        getClassList()
    })
}

const pageQuery = ref({
    page: {
        total: 0,
        size: 15,
        current: 1,
    },
    teacher_id: currentUser.id
})



const getClassList = () => {
    classs.value = []
    API({
        url: '/class/classList/' + pageQuery.value.teacher_id + "/" + pageQuery.value.page.current,
        method: 'get'
    }).then((res) => {
        classs.value = res.data.data.records
        pageQuery.value.page.total = res.data.data.total
        classLoading.value = false
    })
}
getClassList()
// 改变页码
const changePage = (newPage: number) => {
    classLoading.value = true
    pageQuery.value.page.current = newPage
    // TODO: 分页的时候选择是搜索分页还是正常分页
    getClassList()
}

const showMsg = (state: number, message: string) => {
    if (state === 40001) {
        ElMessage({
            message: message,
            type: 'success'
        })
    } else {
        ElMessage.error(message)
    }
}
</script>